<div class="relative overflow-x-auto">
  <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
    <thead class="text-sm text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
      <tr>
        <th scope="col" class="px-4 py-2">
          {{ 'PAC.KEY_WORDS.IsDefault' | translate: {Default: 'Is Default'} }}
        </th>
        <th scope="col" class="px-4 py-2">
          {{ 'PAC.KEY_WORDS.Logo' | translate: {Default: 'Logo'} }}
        </th>
        <th scope="col" class="px-4 py-2">
          {{ 'PAC.KEY_WORDS.NAME' | translate: {Default: 'Name'} }}
        </th>
        <th scope="col" class="px-4 py-2">
          {{ 'PAC.KEY_WORDS.CURRENCY' | translate: {Default: 'Currency'} }}
        </th>
        <th scope="col" class="px-4 py-2">
          {{ 'PAC.KEY_WORDS.TimeZone' | translate: {Default: 'TimeZone'} }}
        </th>
        <th scope="col" class="px-4 py-2">
          {{ 'PAC.KEY_WORDS.ACTION' | translate: { Default: 'Action' } }}
        </th>
      </tr>
    </thead>
    <tbody>
      @for (row of organizations$ | async; track row.id) {
        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
          <th scope="row" class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            @if (row.isDefault) {
              <span>✅</span>
            }
          </th>
          <td class="px-4 py-2">
            <pac-org-avatar [organization]="row" class="block w-8 h-8 rounded-full overflow-hidden" />
          </td>
          <td class="px-4 py-2">
            {{ row.name }}
          </td>
          <td class="px-4 py-2">
            {{ row.currency }}
          </td>
          <td class="px-4 py-2">
            {{ row.timeZone }}
          </td>
          <td class="px-4 py-2">
            <div class="flex items-center gap-1">
              <button type="button" class="btn action-btn w-6 h-6 rounded-lg flex justify-center items-center"
                (click)="editOrganization(row.id)">
                <i class="ri-edit-box-line"></i>
              </button>
          
              <button type="button" class="btn action-btn danger w-6 h-6 rounded-lg flex justify-center items-center"
                (click)="deleteOrganization(row.id)">
                <i class="ri-delete-bin-2-line"></i>
              </button>
            </div>
          </td>
        </tr>
      }
    </tbody>
  </table>
</div>
